<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="root">
      <!-- vue自带的动态组件component 切换is对应的组件名 -->
      <component :is="type"></component>
      <button @click="handleBtnClick">切换组件</button>
    </div>
    <script>
      // 加了v-once 第一次渲染后 会放进内存，当第二次切换的时候 会直接从内存里面获取
      Vue.component('my-content-one', {
        template: `<div v-once>
                    my-content-one
                   </div>`
      });
      // 加了v-once 第一次渲染后 会放进内存，当第二次切换的时候 会直接从内存里面获取
      Vue.component('my-content-two', {
        template: `<div v-once>
                   my-content-two
                   </div>`
      });

      var vim = new Vue({
        el: '#root',
        data: {
          type: 'my-content-one'
        },
        methods: {
          handleBtnClick: function() {
            this.type =
              this.type === 'my-content-one'
                ? 'my-content-two'
                : 'my-content-one';
          }
        }
      });
      // component vue自带的动态组件切换标签
      // v-once只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
    </script>
  </body>
</html>
